<!-- 商家中心 -->
<template>
	<view>
		<view class="merchant-wrap" v-if="haveDianpu">
			<view class="shopinfo-box">
				<!-- 标题栏 -->
				<u-navbar backIconName="" :isFixed="false" :borderBottom="false" :background="navbar.background" :backTextStyle="navbar.backTextStyle" backText="商家中心"></u-navbar>
				<!-- 商家信息 -->
				<view class="user-head u-flex u-row-between">
					<view class="shop-info">
						<view class="u-flex u-m-b-10">
							<text class="shop-title u-m-r-20">{{ storeDetail.company_name }}</text>
							<text class="iconfont iconxiala" @tap="isShowDetail = !isShowDetail"></text>
						</view>
						<view class="" v-if="isShowDetail">
							<text class=" shop-address u-m-r-20">{{ storeDetail.realname }}</text>
							<text class="shop-address u-m-r-20">{{ storeDetail.phone }}</text>
						</view>
						<view class="shop-address" @tap="jump('/pages/app/merchant/info')">
							{{ storeDetail.province_name || '' }}{{ storeDetail.city_name || '' }}{{ storeDetail.area_name || '' }}{{ storeDetail.address || '' }}
						</view>
					</view>
					<button @tap="$Router.pushTab('/pages/index/user')" class="u-reset-button merchant-btn">切换个人版</button>
				</view>
			</view>
			<view class="dianpu_tixian">
				<u-button type="primary" @tap="$Router.push('/pages/app/merchant/dianpu_withdraw_list')">店铺提现</u-button>
			</view>
			<view class="cancel-shop-box">
				<!-- 筛选框 -->
				<view class="cancel-nav u-flex">
					<u-dropdown ref="uDropdown" activeColor="#4cb89d" :borderBottom="false">
						<u-dropdown-item v-model="filter1Value" @change="changeFilter1" :title="filter1Label" :options="filterList1"></u-dropdown-item>
						<u-dropdown-item v-model="filter2Value" @change="changeFilter2" :title="filter2Label" :options="filterList2"></u-dropdown-item>
					</u-dropdown>
				</view>
				<!-- 销量 -->
				<view class="sales-volume-box u-flex u-row-between u-p-30">
					<view class="sales-volume u-flex u-row-center u-col-center">订单量(单)：{{ orderInfo.total || 0 }}</view>
					<view class="sales-volume u-flex u-row-center u-col-center">交易额(元)：{{ orderInfo.total_money || 0 }}</view>
				</view>
			</view>
		
			<!-- 订单列表 -->
			<view class="order-list" v-for="order in storeOrderList" :key="order.order_info.order_sn">
				<view class="order-head u-flex u-row-between">
					<text class="no">订单编号：{{ order.order_info.order_sn }}</text>
					<text class="state">{{ order.order_info.status_name }}</text>
				</view>
				<view class="goods-order" v-for="item in order.order_info.item" :key="item.id">
					<shopro-mini-card :title="item.goods_title" :image="item.goods_image">
						<template #describe>
							<view class="order-sku u-ellipsis-1">
								<text class="order-num">数量:{{ item.goods_num || 0 }};</text>
								{{ item.goods_sku_text ? item.goods_sku_text : '' }}
							</view>
						</template>
						<template #cardBottom>
							<view class="order-price-box u-flex ">
								<text class="order-price font-OPPOSANS">￥{{ item.goods_price || 0 }}</text>
								<!-- <button class="u-reset-button status-btn" v-if="item.status_name">{{ item.status_name }}</button> -->
							</view>
						</template>
					</shopro-mini-card>
				</view>
				<view class="u-flex " style="justify-content: space-between;">
					<view class="order-bottom u-flex">
						<text class="total-price-title">下单人ID：</text>
						<text style="font-size: 20rpx;">{{order.buyer_id}}</text>
					</view>
					<view class="order-bottom u-flex">
						<text class="total-price-title">订单金额：</text>
						<text class="total-price">{{ order.order_info.total_fee }}</text>
					</view>
				</view>
				
			</view>
		
			<!-- 置空页 -->
			<u-empty :show="isEmpty" margin-top="160" mode="list"></u-empty>
		
			<!-- 更多 -->
			<u-loadmore v-if="storeOrderList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			<!-- 日期选择 -->
			<u-calendar
				v-model="showCalendar"
				safeAreaInsetBottom
				mode="range"
				start-text="开始"
				end-text="结束"
				range-color="#4CB89D"
				range-bg-color="rgba(76,184,157,0.13)"
				active-bg-color="#4CB89D"
				:customStyle="{ background: 'linear-gradient(90deg, #4cb89d, #4CB89D)', boxShadow: '0 7rpx 11rpx 2rpx rgba(4cb89d, 0.34)' }"
				btnType="success"
				@change="selDate"
			></u-calendar>
		</view>
		<view v-else>
			<shopro-empty
				:image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
				tipText="暂无店铺"
				btnText="返回首页"
				@click="$Router.pushTab('/pages/index/index')"
			></shopro-empty>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
import Auth from '@/shopro/permission/index.js';
export default {
	components: {},
	data() {
		return {
			isEmpty: false,
			isShowDetail:false,
			haveDianpu:false,
			navbar: {
				//标题栏
				background: {
					background: 'none'
				},
				backTextStyle: {
					color: '#fff',
					fontSize: '40rpx',
					fontWeight: '800'
				}
			},
			// 筛选
			filter1: 'today',
			filter1Value: 0,
			filter1Label: '今日',
			filterList1: [
				{ label: '今日', value: 0, parmas: 'today' },
				{ label: '昨日', value: 1, parmas: 'yesterday' },
				{ label: '本周', value: 2, parmas: 'week' },
				{ label: '本月', value: 3, parmas: 'month' },
				{ label: '自定义', value: 4, parmas: 'custom' }
			],
			filter2: 'all',
			filter2Value: 0,
			filter2Label: '全部',
			filterList2: [
				{ label: '全部', value: 0, parmas: 'all' },
				{ label: '待发货', value: 1, parmas: 'nosend' },
				{ label: '待完成', value: 2, parmas: 'noget' },
				{ label: '已完成', value: 3, parmas: 'finish' }
			],
			custom: [], //自定义日期

			storeOrderList: [], //订单商品列表
			orderInfo: {}, //订单统计信息
			storeDetail: {}, //门店信息
			showCalendar: false, //日期选择

			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1
		};
	},
	computed: {},
	onLoad(options) {
		options.storeId && uni.setStorageSync('storeId', options.storeId);
		this.getStoreDetail();
	},
	onShow() {
		this.currentPage = 1;
		this.lastPage = 1;
		this.storeOrderList = [];
		this.getStoreOrder();
	},
	onPullDownRefresh() {
		this.currentPage = 1;
		this.lastPage = 1;
		this.storeOrderList = [];
		this.getStoreOrder();
	},
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getStoreOrder();
		}
	},
	methods: {
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},

		// 筛选
		changeFilter1(e) {
			if (e === 4) {
				this.showCalendar = true;
			} else {
				this.custom = [];
				this.filter1 = this.filterList1[e].parmas;
				this.filter1Label = this.filterList1[e].label;
				this.onFilter();
			}
		},
		changeFilter2(e) {
			this.filter2 = this.filterList2[e].parmas;
			this.filter2Label = this.filterList2[e].label;
			this.onFilter();
		},

		// 选择门店
		goStoreList() {
			this.$Router.replace({
				path: '/pages/app/merchant/list'
			});
		},

		// 获取门店信息
		getStoreDetail() {
			let that = this;
			that.$http('store.dianpu_info').then(res => {
				if(res.code == 300){ 
					return
				};
				if (res.code === 1) {
					this.haveDianpu = true
					that.storeDetail = res.data;
				}
			});
		},
		// 门店订单列表
		getStoreOrder() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('dianpu.order', {
				date_type: that.filter1,
				date: that.custom,
				type: that.filter2,
				page: that.currentPage
			}, '加载中...').then(res => {
				uni.stopPullDownRefresh();
				if (res.code == 1) {
					that.storeOrderList = [...that.storeOrderList, ...res.data.rows];
					that.isEmpty = !that.storeOrderList.length;
					that.orderInfo = res.data;
					that.lastPage = Math.ceil(res.data.total / 10);
					that.loadStatus = that.currentPage < that.lastPage ? 'loadmore' : 'nomore';
				}
			});
		},

		// 选择日期
		selDate(e) {
			this.custom = [];
			this.custom.push(e.startDate);
			this.custom.push(e.endDate);
			this.isShowDropDown = false;
			this.filter1Label = `${e.startDate.replace(/-/g, ':')}-${e.endDate.replace(/-/g, ':')}`;
			this.onFilter();
		},

		// 选择筛选
		onFilter(val, title) {
			this.storeOrderList = [];
			this.currentPage = 1;
			this.getStoreOrder();
		}
	}
};
</script>

<style lang="scss">
// 遮罩
.mask {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 20;
}
// 商户信息
.shopinfo-box {
	background: url($IMG_URL+'/imgs/user/shop_headbg.png') no-repeat;
	background-size: 100% 100%;
	height: 320rpx;
	.user-head {
		padding-top: 10rpx;
		.shop-info {
			padding-left: 30rpx;
			.shop-title {
				font-size: 34rpx;

				font-weight: bold;
				color: rgba(255, 255, 255, 1);
			}
			.iconxiala {
				font-size: 34rpx;
				color: rgba(255, 255, 255, 1);
			}
			.shop-address {
				font-size: 28rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				width: 540rpx;
			}
		}
		.merchant-btn {
			padding: 0;
			width: 136rpx;
			line-height: 46rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 23rpx 0px 0px 23rpx;
			font-size: 20rpx;

			font-weight: 500;
			color: #3eb49c;
		}
	}
}
// 卡片
.info-card-box {
	background-color: #fff;
	padding: 30rpx 20rpx;
	.info-card {
		position: relative;
		width: 350rpx;
		height: 165rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.card-bg {
			width: 100%;
			height: 100%;
		}
		.card-content {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 3;
			top: 0;
			left: 0;
			padding: 30rpx 0 0 30rpx;
			.card-title {
				font-size: 28rpx;

				font-weight: bold;
				color: rgba(255, 255, 255, 1);
			}
			.card-detail-box {
				padding: 10rpx 20rpx;
				height: 45rpx;
				background: rgba(255, 255, 255, 1);
				width: 150rpx;
				border-radius: 23rpx;
				margin-top: 20rpx;
				.card-detail {
					font-size: 22rpx;

					font-weight: 500;
				}
				.icon-color1 {
					color: #00b6ce;
					font-size: 24rpx;
				}
				.icon-color2 {
					color: #0f98f9;
					font-size: 24rpx;
				}
			}
		}
	}
}
// 核销nav
.cancel-nav {
	background: #fff;
	margin: 10rpx 0 0;
	position: relative;
	z-index: 22;
	.nav-item {
		flex: 1;
		&:first-child {
			&::after {
				content: '';
				height: 30rpx;
				width: 2rpx;
				background-color: #bdbdbd;
				display: inline-block;
			}
		}

		.item-title {
			font-size: 30rpx;

			font-weight: 400;
			color: #666;
			line-height: 100rpx;
		}
		.cuIcon-triangleupfill {
			color: #666;
			transition: all linear 0.2s;
		}
		.icon-active {
			transition: all linear 0.2s;
			transform: rotate(180deg);
			color: #4cb89d;
		}
		.title-active {
			color: #4cb89d;
		}
		.nav-line {
			width: 100%;
			height: 2rpx;
			background: rgba(#ccc, 0.5);
		}

		.line-active {
			background: #4cb89d;
			height: 2rpx;
		}
	}
}

// 销量
.sales-volume-box {
	background-color: #fff;
	.sales-volume {
		width: 338rpx;
		height: 72rpx;
		background: rgba(76, 184, 157, 0.06);
		border: 1rpx solid rgba(185, 227, 217, 1);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(76, 184, 157, 1);
	}
}
// 店铺提现
.dianpu_tixian{
	padding: 40rpx;
}
// 订单列表
.order-list {
	background: #fff;
	margin: 20rpx 0;
	padding: 0 20rpx;
	.order-bottom {
		justify-content: flex-end;
		height: 80rpx;
		padding: 0 20rpx;
		.total-price-title {
			color: #999999;
			font-size: 24rpx;
		}
		.total-price {
			color: #333;
			font-size: 26rpx;
			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}
	.order-head {
		padding: 0 25rpx;
		height: 77rpx;
		border-bottom: 1rpx solid #dfdfdf;

		.no {
			font-size: 26rpx;
			color: #999;
		}

		.state {
			font-size: 26rpx;
			color: #a8700d;
		}
	}
	.goods-order {
		border-bottom: 1px solid rgba(223, 223, 223, 0.5);
		padding: 20rpx;
		margin-bottom: 20rpx;
		.order-sku {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			width: 450rpx;
			margin-bottom: 20rpx;
			.order-num {
				margin-right: 10rpx;
			}
		}
		.order-price-box {
			.status-btn {
				height: 32rpx;
				border: 1rpx solid rgba(207, 169, 114, 1);
				border-radius: 15rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(168, 112, 13, 1);
				padding: 0 10rpx;
				margin-left: 20rpx;
				background: rgba(233, 183, 102, 0.16);
			}
			.order-price {
				font-size: 26rpx;

				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
}
</style>
